<template>
  <div>
    <el-tabs v-model="levelType" @tab-click="handleClick">
      <el-tab-pane label="企业文件库" name="0"></el-tab-pane>
      <el-tab-pane label="我上传的文件" name="1" v-if="showTabs"></el-tab-pane>
    </el-tabs>
    <div>
      <el-table ref="multipleTable" :data="tableList" height="400px" :row-style="{ height: '40px' }" row-key="fileId" @select="handleSelectionChange" @select-all="handleSelectionAll">
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <el-table-column prop="label" label="标签" align="center" min-width="120">
          <template slot-scope="scope">
            <tagGroupShowTable :tagGroup="scope.row.weGroupTagVOS" />
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="文件名" align="center" min-width="180">
          <template slot-scope="scope">
            <div class="text-color" @click="toInfo(scope.row)">
              {{ scope.row.fileName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sendNum" label="下载次数" align="center">
          <template slot-scope="scope">
            {{scope.row.sumDownloadCount}}
          </template>
        </el-table-column>
        <el-table-column prop="sumSendCount" label="发送总次数" align="center" min-width="110"></el-table-column>
        <el-table-column prop="createByName" label="创建人" align="center">
          <template slot-scope="scope">
            <div class="text-color">{{ scope.row.createByName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"  min-width="140px"></el-table-column>
      </el-table>
      <NormalPagination :currentPage="form.pageNum" :pageSize="form.pageSize" :total="total" :pageSizeList="[10, 20, 30]" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></NormalPagination>
      <div style="text-align: right; margin-top: 10px;">
        <el-button type="info" plain @click="selectCancelFn">取消</el-button>
        <el-button type="primary" @click="selectSureFn">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { queryFileList } from '@/api/communityOperating/fileManage.js'

export default {
  props: {
    linkList: {
      type: Array,
      default: () => []
    },
    showTabs: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      materialFileVisible: false,
      levelType: '0',
      tableList: [],
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 10
      },
      currentSelectList: [],
    }
  },
  created() {
    this.currentSelectList = JSON.parse(JSON.stringify(this.linkList))
    this.queryFileList()
  },
  methods: {
    handleClick() {
      this.form = {
        pageNum: 1,
        pageSize: 10
      }
      this.tableList = [];
      this.total = 0;
      this.queryFileList()
    },
    handleSizeChange(val) {
      this.form.pageNum = 1;
      this.form.pageSize = val;
      this.queryFileList()
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.queryFileList()
    },
    async queryFileList() {
      const params = {
        ...this.form,
        groupLevel: this.levelType
      }
      const res = await queryFileList(params)
      if (res.code === 200) {
        res.rows.forEach((item) => {
          item.labels = item.label && item.label.split(';')
          if (item.personDownloadByCount == 'null' || item.personDownloadByCount == null) item.personDownloadByCount = 0
        })
        let customerInfo = JSON.parse(JSON.stringify(res.rows))
        if (customerInfo.weGroupTagVOS) {
          customerInfo.weGroupTagVOS1 = JSON.parse(JSON.stringify(customerInfo.weGroupTagVOS))
          customerInfo.weGroupTagVOS = []
          customerInfo.weGroupTagVOS1.forEach(tagGroup => {
            tagGroup.tagName.split(',').forEach(tagName => {
              customerInfo.weGroupTagVOS.push({ groupName: tagGroup.groupName, tagName })
            })
          })
        }
        this.tableList = customerInfo || []
        this.tableList.forEach(element => {
          element.checked = false;
        })
        this.currentSelectList.length > 0 && this.tableList.forEach(element => {
          this.currentSelectList.forEach(item => {
            if (item.mediaType == 3 && element.fileId == item.id) {
              element.checked = true;
              this.$refs.multipleTable.toggleRowSelection(element, true);
            }
          })
        })
        this.total = res.total || 0
      }
    },
    handleSelectionChange(valList, newVal) {
      this.$refs.multipleTable.clearSelection();
      // 切换最近一次选择数据的状态
      this.$refs.multipleTable.toggleRowSelection(newVal, true);
        this.currentSelectList[0] = {
          name: newVal.fileName,
          materialName: newVal.fileName,
          id: newVal.fileId,
          coverUrl: window.globalConfig.IMAGE_API + newVal.photoUrl,
          materialUrl: window.globalConfig.IMAGE_API + newVal.photoUrl,
          mediaType: '3',
          materialType: 3,
          groupName: newVal.groupName,
          text: newVal.text,
          companyGroupName: newVal.companyGroupName,
          weGroupTagVOS: newVal.weGroupTagVOS,
        }
    },
    handleSelectionAll(valList) {
      // 访客雷达只支持单选
        this.$refs.multipleTable.clearSelection();
        if(this.currentSelectList.length > 0) this.$refs.multipleTable.toggleRowSelection(this.tableList.filter(item => item.fileId == this.currentSelectList[0].id && item.mediaType == this.currentSelectList[0].mediaType)[0], true);
    },
    selectCancelFn() {
      this.$emit("selectCancelFn");
    },
    selectSureFn() {
      console.log(this.currentSelectList, 'current')
      this.$emit('confirm', this.currentSelectList)
      this.levelType = '0'
      this.$refs.multipleTable.clearSelection();
    },
    toInfo(row) {
      let temp = {
        name: row.fileName,
        materialName: row.fileName,
        id: row.fileId,
        coverUrl: window.globalConfig.IMAGE_API + row.photoUrl,
        mediaType: '3',
        materialType: 3,
        groupName: row.groupName,
        text: row.text,
        companyGroupName: row.companyGroupName,
        weGroupTagVOS: row.weGroupTagVOS,
      }
      this.$emit('view', temp)
    },
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/base.scss";
.text-color {
  color: #082aff;
}
</style>
